<template>
    <div class="filter-wrap">
        <a-form layout="inline" :model="form">
            <a-row :gutter="24">
                <a-col :span="8">
                    <a-form-item label="关键字" style="margin-bottom: 0">
                        <a-input v-model:value="form.name" placeholder="请输入文件名称关键字" />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="产出阶段" style="margin-bottom: 0">
                        <a-select placeholder="请选择" v-model:value="form.connectType">
                            <a-select-option v-for="item of options.fileStage" :key="item.dimensionName">
                                {{ item.dimensionName }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="文件类型" style="margin-bottom: 0">
                        <a-select placeholder="请选择" v-model:value="form.fileType">
                            <a-select-option v-for="item of options.fileType" :key="item.dimensionName">
                                {{ item.dimensionName }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="24" style="text-align: right" key="btn">
                    <a-form-item style="margin-bottom: 0">
                        <a-button @click="handleReset">重置</a-button>
                        <a-button type="primary" style="margin-left: 8px" @click="handleSearch">查询</a-button>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <a-divider dashed />
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    emits: ['search'],
    setup(_, { emit }) {
        const state = reactive<any>({
            options: {
                fileType: [{ dimensionName: '图片' }, { dimensionName: '表格' }, { dimensionName: '文档' }, { dimensionName: '其他' }],
                fileStage: [{ dimensionName: '发起需求' }, { dimensionName: '需求初审' }, { dimensionName: '需求受理信息' }, { dimensionName: '业务需求分析' }, { dimensionName: '更新包' }, { dimensionName: '产品文档' }, { dimensionName: '排期' }, { dimensionName: '测试报告' }, { dimensionName: '评审记录' }, { dimensionName: '验收交付' }]
            },
            form: {
                name: '',
                connectType: null,
                fileType: null
            }
        });
        // 重置搜索条件
        const handleReset = () => {
            state.form = {
                name: '',
                connectType: null,
                fileType: null
            };
        };
        const handleSearch = () => {
            emit('search', state.form);
        };
        return {
            ...toRefs(state),
            handleReset,
            handleSearch
        };
    }
});
</script>